<script setup>
import { ref, onMounted, inject } from 'vue'
import HelloWorld from './components/HelloWorld.vue'

// 通过注入方式获取LifeService实例
const lifeService = inject('lifeservice')

// 状态变量
const isLoading = ref(false)
const apiResponse = ref(null)
const error = ref(null)

// 测试API服务的方法
async function testApiService() {
  try {
    isLoading.value = true
    error.value = null
    
    // 获取API服务实例
    const apiService = lifeService.get('api')
    
    // 调用API服务
    const response = await apiService.get('/test')
    apiResponse.value = response
  } catch (err) {
    error.value = err.message
    console.error('Error testing API service:', err)
  } finally {
    isLoading.value = false
  }
}

// 获取已注册的服务列表
function getRegisteredServices() {
  return lifeService.getServiceNames()
}

// 组件挂载时执行
onMounted(() => {
  console.log('LifeService framework integrated successfully!')
  console.log('Registered services:', getRegisteredServices())
})
</script>

<template>
  <div class="app-container">
    <header class="app-header">
      <div class="logo-container">
        <a href="https://vite.dev" target="_blank">
          <img src="/vite.svg" class="logo" alt="Vite logo" />
        </a>
        <a href="https://vuejs.org/" target="_blank">
          <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
        </a>
        <div class="lifeservice-logo">LifeService</div>
      </div>
    </header>

    <main class="app-main">
      <HelloWorld msg="Vite + Vue + LifeService" />
      
      <section class="lifeservice-demo">
        <h2>LifeService Framework Demo</h2>
        
        <div class="services-info">
          <h3>Registered Services</h3>
          <ul>
            <li v-for="service in getRegisteredServices()" :key="service">
              {{ service }}
            </li>
          </ul>
        </div>
        
        <div class="api-test">
          <h3>Test API Service</h3>
          <button @click="testApiService" :disabled="isLoading">
            {{ isLoading ? 'Loading...' : 'Call API' }}
          </button>
          
          <div v-if="error" class="error-message">
            Error: {{ error }}
          </div>
          
          <div v-if="apiResponse" class="api-response">
            <h4>API Response:</h4>
            <pre>{{ JSON.stringify(apiResponse, null, 2) }}</pre>
          </div>
        </div>
      </section>
    </main>
  </div>
</template>

<style scoped>
.app-container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 2rem;
}

.app-header {
  margin-bottom: 2rem;
}

.logo-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
}

.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}

.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}

.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}

.lifeservice-logo {
  font-size: 2rem;
  font-weight: bold;
  color: #42b883;
  padding: 1rem;
  border: 2px solid #42b883;
  border-radius: 8px;
}

.app-main {
  text-align: center;
}

.lifeservice-demo {
  margin-top: 3rem;
  padding: 2rem;
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  text-align: left;
}

.lifeservice-demo h2 {
  text-align: center;
  color: #42b883;
  margin-bottom: 2rem;
}

.services-info, .api-test {
  margin-bottom: 2rem;
}

.services-info ul {
  list-style-type: none;
  padding: 0;
}

.services-info li {
  padding: 0.5rem;
  margin: 0.5rem 0;
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
}

button {
  background-color: #42b883;
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
  transition: background-color 0.3s;
}

button:hover:not(:disabled) {
  background-color: #3aa573;
}

button:disabled {
  background-color: #666;
  cursor: not-allowed;
}

.error-message {
  color: #ff4444;
  margin-top: 1rem;
  padding: 1rem;
  background-color: rgba(255, 68, 68, 0.1);
  border-radius: 4px;
}

.api-response {
  margin-top: 1rem;
  padding: 1rem;
  background-color: rgba(66, 184, 131, 0.1);
  border-radius: 4px;
  overflow-x: auto;
}

.api-response pre {
  text-align: left;
  white-space: pre-wrap;
  word-break: break-word;
}
</style>
